<template>
  <div style="display: flex; flex-direction: column; height: 680px;">
    <el-card shadow="hover">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="抓拍时间">
          <el-date-picker
            v-model="queryParams.startAndEnd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            clearable
            style="width: 230px"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item label="设备名称" >
          <el-input v-model="queryParams.equipmentName" clearable placeholder="请输入设备名称" style="width: 180px" />
        </el-form-item>
        <el-form-item label="安装位置" >
          <el-cascader v-model="queryParams.parkPlaceIdList" clearable :options="parkPlaceList" :props="{ value: 'id', label: 'label', children: 'children', checkStrictly: true }" style="width: 260px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" style="flex: 1; display: flex; flex-direction: column; position: relative; margin-top: 10px;" >
      <div v-loading="loading" class="image-list">
        <p v-if="mediaList==null || mediaList.length==0" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">暂无数据</p>
        <el-checkbox-group v-model="imageIdList" class="image-list-checkbox">
          <div v-for="image in mediaList" class="image-item">
            <el-checkbox :disabled="props.imageList.map(item=>item.fileId).includes(image.fileId)" label="" :value="image.fileId" class="image-checkbox" @change="(flag)=> selectImage(image, flag)" />
            <el-image style="width: 100%; height: 160px" :src="image.filePath" fit="contain" />
            <div class="image-info">
              <span class="image-info-item" >
                <span class="image-info-title">设备名称：</span>
                <span class="image-info-content">{{ image.equipmentName }}</span>
              </span>
              <span class="image-info-item" >
                <span class="image-info-title">抓拍时间：</span>
                <span class="image-info-content">{{ image.createTime }}</span>
              </span>
              <span class="image-info-item">
                <span class="image-info-title" >抓拍位置：</span>
                <el-tooltip :content="getParkPositionStr(image.parkBuildingName, image.parkBuildingAreaName, image.parkBuildingFloorName, image.parkBuildingRoomName) " placement="top">
                  <span class="image-info-content">
                    {{ getParkPositionStr(image.parkBuildingName, image.parkBuildingAreaName, image.parkBuildingFloorName, image.parkBuildingRoomName) }}
                  </span> 
                </el-tooltip>
              </span>
            </div>
          </div>
        </el-checkbox-group>
      </div>

      <pagination v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" background layout="total, prev, pager, next" @pagination="getList" />
    </el-card>

    <div style="display: flex; justify-content: center; margin-top: 10px">
      <el-button type="primary" @click="submitForm" >确认</el-button>
      <el-button @click="emit('close')" >关闭</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { listmedia_info } from '@/api/security/camera/media_info';
import { getParkPositionStr } from '@/utils/parkUtil'
import { parkTree } from '@/api/access/parking-lot/parking-lot-place';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['submit', 'close']);
const props = defineProps({
  equipmentId: {
    type: String,
    default: null
  },
  imageList: {
    type: Array<any>,
    default: () => []
  }
});

const loading = ref(true);
const total = ref(0);
const imageIdList = ref([])

const queryFormRef = ref<ElFormInstance>();
const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  fileId: undefined,
  equipmentId: undefined,
  startTime: null,
  endTime: null,
  startAndEnd: null,
  parkPlaceIdList: []
});

/** 查询媒体库列表 */
const mediaList = ref<any>([]);
const getList = async () => {
  queryParams.value.parkBuildingId = queryParams.value.parkPlaceIdList && queryParams.value.parkPlaceIdList.length > 0 ? queryParams.value.parkPlaceIdList[0] : null;
  queryParams.value.parkBuildingAreaId = queryParams.value.parkPlaceIdList && queryParams.value.parkPlaceIdList.length > 1 ? queryParams.value.parkPlaceIdList[1] : null;
  queryParams.value.parkBuildingFloorId = queryParams.value.parkPlaceIdList && queryParams.value.parkPlaceIdList.length > 2 ? queryParams.value.parkPlaceIdList[2] : null;
  queryParams.value.parkBuildingRoomId = queryParams.value.parkPlaceIdList && queryParams.value.parkPlaceIdList.length > 3 ? queryParams.value.parkPlaceIdList[3] : null;

  loading.value = true;
  const res = await listmedia_info(queryParams.value).finally(() => { loading.value = false });
  mediaList.value = res.rows;
  total.value = res.total;
};

/** 获取区域 */
let parkPlaceList = ref([]);
const getPlaceList = async () => {
  const res = await parkTree();
  parkPlaceList.value = res.data;

  console.log('获取园区区域：', parkPlaceList.value);
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value = { pageNum: queryParams.value.pageNum, pageSize: queryParams.value.pageSize, parkPlaceIdList: [] };
  
  handleQuery();
};

/**
 * 选择图片
 */
const currEquipmentId = ref(props.equipmentId);
const selectImage = (image: any, flag: any) => {
  if (currEquipmentId.value != null && currEquipmentId.value != image.equipmentId && flag == true) {
    imageIdList.value.splice(imageIdList.value.indexOf(image.equipmentId), 1);

    proxy.$modal.msgWarning('同一个事件只能选择一个设备')

    return
  }

  if (props.imageList.length > 0 && !props.imageList.map(item=>item.equipmentId).includes(image.equipmentId) && flag == true) {
    imageIdList.value.splice(imageIdList.value.indexOf(image.equipmentId), 1);

    proxy.$modal.msgWarning('同一个事件只能选择一个设备')

    return
  }

  if (flag == true) {
    currEquipmentId.value = image.equipmentId;
  }
}

/** 提交按钮 */
const submitForm = () => {
  if (imageIdList.value.length == 0) {
    proxy?.$modal.msgWarning('请选择图片')
    return
  }

  let fileList = mediaList.value.filter((item)=> imageIdList.value.includes(item.fileId))

  emit('submit', fileList, currEquipmentId.value);
  emit('close');
};

/** 日期框改变 */
const handleDateChange = () => {
  if (queryParams.value.startAndEnd && queryParams.value.startAndEnd.length == 2) {
    queryParams.value.startTime = queryParams.value.startAndEnd[0] + ' 00:00:00';
    queryParams.value.endTime = queryParams.value.startAndEnd[1] + ' 23:59:59';
  } else {
    queryParams.value.startTime = '';
    queryParams.value.endTime = '';
  }
};

onMounted(() => {
  getList();
  getPlaceList();
});
</script>
<style lang="scss" scoped>
:deep(.el-card__header) {
  height: 0;
}
:deep(.el-card__body) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
:deep(.pagination-container) {
  margin-top: 0;
}
:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
  background-color: #9b9b9b;
}
:deep(.el-cascader .el-input) {
  width: 100% !important;
}
.image-list {
  flex: 1;
  width: 1100px;
  margin: 0 auto;
  .image-list-checkbox {
    display: flex;
    flex-wrap: wrap;
  }
  .image-item {
    position: relative;
    margin: 10px;
    padding: 2px;
    width: 200px;
    height: 220px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .image-checkbox {
      position: absolute;
      right: 3px;
      top: -3px;
    }
    .image-info-title {
      width: 60px; 
      height: 20px;
      line-height: 20px;
      display: inline-block; 
      overflow: hidden;
    }
    .image-info-content {
      height: 20px;
      line-height: 20px;
      width: 126px;
      display: inline-block; 
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .image-info {
      width: 100%;
      height: 60px;
    }
    .image-info-item {
      display: block;
      font-size: 12px;
      padding: 0 0 0 4px;
      width: 100%;
      height: 20px;
    }
  }
}
</style>
